<template xmlns:v-swiper="http://www.w3.org/1999/xhtml">
  <section class="container">
    <div v-swiper:mySwiper="swiperOption" class="category-nav">
      　　<div class="swiper-wrapper">
      　　　　<div class="swiper-slide" v-for="item in bannerList">
      　　　　　　<a :href="item.banner_link">
      <img :src="item.banner_url">
    </a>
      　　　　</div>
      　　</div>
      　　<div class="swiper-pagination swiper-pagination-bullets bullets bullets-active point-style"></div>
    </div>
    <section class="top-brand">
      <ul class="top-brand-list" v-if="brandList.length">
        <li v-for="(brand, index) in brandList" :key="index" v-if="index > 3">
          <router-link :to="{path: '/categories', query:{brand_id: brand.brand_id, brand_name: brand.brand_name}}">
            <img :src="brand.brand_image" :alt="brand.brand_name">
          </router-link>
        </li>
      </ul>
      <div  v-else>
        <transition name="loading">
          <loading></loading>
        </transition>
      </div>
    </section>
    <grid-list :productList="productList"></grid-list>
  </section>
</template>

<script>
  import { banners, categories, product } from '~/api/index'
  import { mapState, mapMutations } from 'vuex'
  import GridList from '~/components/Grid.vue'
  export default {
    async asyncData () {
      try {
        const bannerData = await banners()
        const brandData = await categories('brand')
        const productData = await product()
        return {
          title: 'home',
          bannerList: bannerData.data,
          brandList: brandData.data,
          productList: productData.data
        }
      } catch (err) {
        console.error(err)
      }
    },
    data () {
      return {
        swiperOption: {
          notNextTick: true,
          autoplay: 5000,
          effect: 'coverflow',
          grabCursor: true,
          setWrapperSize: true,
          autoHeight: true,
          pagination: '.swiper-pagination',
          paginationClickable: true
        }
      }
    },
    computed: {
      ...mapState(['data'])
    },
    components: {
      GridList
    },
    head () {
      return {
        title: this.title,
        meta: [
          { hid: 'description', name: 'description', content: 'My custom description' }
        ]
      }
    },
    created () {
    },
    methods: {
      ...mapMutations([
        'TEST'
      ])
    }
  }
</script>

<style lang="scss" scoped>
  @import "../assets/style/mixin";
  .container {
    width: 100%;
  }

  .category-nav {
    width: 100%;
    padding-top: 2rem;
    background-color: #fff;
    img {
      width: 100%;
      height: auto;
    }
  }
  .top-brand-list {
    @include fj;
    width: 98%;
    margin: 0 auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    li {
      padding: 0.4rem 0 0;
      img {
        background-color: #fff;
      }
    }
  }
</style>
